<template>
  <BasicForm @register="registerForm" class="search-form">
    <template #dateSelect>
      <div style="display: flex; gap: 8px">
        <a-date-picker v-model:value="yearValue" picker="year" format="YYYY年" value-format="YYYY" placeholder="请选择年份" style="width: 50%" />
        <a-select v-model:value="monthValue" placeholder="请选择月份" style="width: 50%" class="month-select">
          <a-select-option v-for="i in 12" :key="i" :value="String(i).padStart(2, '0')"> {{ i }}月 </a-select-option>
        </a-select>
      </div>
    </template>
  </BasicForm>
  <BasicTable @register="registerTable">
    <template #taskName="{ record }">
      <a-button type="link" @click="handleTaskName(record)">{{ record.taskName }}</a-button>
    </template>
    <template #edit="{ record }">
      <FormOutlined class="tableEditIcon" />
    </template>
    <template #status="{ record }">
      {{ record.onOff }}
      <a-switch :checked="record.onOff === 'on'" @click="handleCheckboxChange(record)" :loading="record.switchLoading" />
    </template>
  </BasicTable>
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';
  import { BasicTable, useTable } from '@/components/Table';
  import { useForm, BasicForm } from '@/components/Form';
  import { columns, searchFormSchema } from './mange.data';
  import { FormOutlined } from '@ant-design/icons-vue';
  import { useRouter } from 'vue-router';
  import { getList, switchOnOff } from './index.api';
  const router = useRouter();
  const mockData = [{ id: 1 }, { id: 2 }];

  const [registerForm, { getFieldsValue, setFieldsValue }] = useForm({
    schemas: searchFormSchema,
    labelWidth: 100,
    baseColProps: { span: 8 },
    rowProps: {
      gutter: 24,
    },
    labelCol: {
      style: {
        width: '100px',
        textAlign: 'right',
      },
    },
    wrapperCol: {
      style: {
        width: 'calc(100% - 100px)',
        flex: 1,
      },
    },
    componentProps: {
      style: {
        width: '100%',
      },
    },
  });
  setTimeout(() => {
    console.log(getFieldsValue());
  }, 1000);
  const yearValue = ref('');
  const monthValue = ref('');

  const [registerTable, { reload }] = useTable({
    api: async (...params) => {
      await setFieldsValue({
        year: '2025',
        month: '3',
      });
      const formData = await getFieldsValue();
      console.log('api', formData);
      const requestParams = {
        ...params[0],
        ...formData,
      };
      console.log('requestParams', requestParams);
      return await getList(requestParams);
    },
    // dataSource: mockData,
    columns: columns,
    bordered: false,
    rowKey: 'id',
    canResize: false,
    useSearchForm: false,
    formConfig: {
      schemas: searchFormSchema,
      showAdvancedButton: false,
      labelWidth: 100,
      baseColProps: { span: 8 }, // 调整为每行3个表单项
      rowProps: {
        gutter: 24, // 增加间距
      },
      labelCol: {
        style: {
          width: '100px',
          textAlign: 'right',
        },
      },
      wrapperCol: {
        style: {
          width: 'calc(100% - 100px)',
          flex: 1,
        },
      },
      // 增加组件统一样式配置
      componentProps: {
        style: {
          width: '100%', // 组件宽度占满容器
        },
      },
    },
    pagination: true,
  });

  /**
   * 点击任务名称
   * @param record
   */
  const handleTaskName = (record) => {
    console.log('handleTaskName');
    router.push({
      path: '/bi/collect/mange/detail',
      query: {
        id: record.id,
      },
    });
  };

  /**
   * 表格切换开关
   */
  const handleCheckboxChange = (record) => {
    console.log(record)
    switchOnOff({id: record.id, onOff: record.onOff === 'on' ? 'off' : 'on'}).then((res) => {
      //刷新表格
      reload();
    });
  };
  // 监听年月变化，合并为一个值
  watch([yearValue, monthValue], ([year, month]) => {
    setFieldsValue({ year: year, month: month });
    console.log('yearValue', yearValue, 'monthValue', monthValue, getFieldsValue());
  });
</script>

<style scoped lang="less">
  :deep(.ant-picker) {
    width: 100%;
  }
  .tableEditIcon {
    font-size: 18px;
    cursor: pointer;
    &:hover {
      color: #1890ff;
    }
  }
  .search-form {
    background-color: #fff;
    padding: 16px;
    margin: 16px 0;
    :deep(.ant-form-item) {
      margin-bottom: 0;
    }
    :deep(.month-select) {
      .ant-select-selection-placeholder {
        opacity: 1;
      }
    }
  }

  :deep(.ant-picker) {
    width: 100%;
  }
  .tableEditIcon {
    font-size: 18px;
    cursor: pointer;
    &:hover {
      color: #1890ff;
    }
  }
</style>
